<template>
    <div id="map">
    </div>
</template>

<script>
    import Map from 'ol/Map';
    import TileLayer from 'ol/layer/WebGLTile';
    import View from 'ol/View';
    import {OSM, Vector} from 'ol/source';
    import GeoJSON from 'ol/format/GeoJSON';
    import {Stroke, Style, Fill, Circle} from 'ol/style';
    import {Vector as VectorLayer} from 'ol/layer';
    import Icon from 'ol/style/Icon';
    import icon from '../image/icon.png'

    export default {
        name: "CanvasPointsSpriteLayer",
        data() {
            return {};
        },
        mounted() {

            /**
             *矢量几何要素的样式
             */
            let image = new Circle({
                radius: 5,
                fill: null,
                stroke: new Stroke({color: 'red', width: 1})
            });
            let styles = {
                'Point': [
                    new Style({
                        //点样式
                        image: new Icon({src:icon})
                    })
                ],
                'LineString': [
                    new Style({
                        stroke: new Stroke({
                            //线的边界样式
                            color: 'green',
                            width: 1
                        })
                    })
                ],
                'MultiLineString': [
                    new Style({
                        stroke: new Stroke({
                            //多线的边界样式
                            color: 'green',
                            width: 1
                        })
                    })
                ],
                'MultiPoint': [
                    new Style({
                        //多点的点样式
                        image: image
                    })
                ],
                'MultiPolygon': [
                    new Style({
                        stroke: new Stroke({
                            //多区的边界样式
                            color: 'yellow',
                            width: 1
                        }),
                        fill: new Fill({
                            //多区的填充样式
                            color: 'rgba(255, 255, 0, 0.1)'
                        })
                    })
                ],
                'Polygon': [
                    new Style({
                        stroke: new Stroke({
                            //区的边界样式
                            color: 'blue',
                            lineDash: [4],
                            width: 3
                        }),
                        fill: new Fill({
                            //区的填充样式
                            color: 'rgba(0, 0, 255, 0.1)'
                        })
                    })
                ],
                'GeometryCollection': [
                    new Style({
                        stroke: new Stroke({
                            //集合要素的边界样式
                            color: 'magenta',
                            width: 2
                        }),
                        fill: new Fill({
                            //集合要素的填充样式
                            color: 'magenta'
                        }),
                        image: new Circle({
                            //集合要素的点样式
                            radius: 10,
                            fill: null,
                            stroke: new Stroke({
                                color: 'magenta'
                            })
                        })
                    })
                ],
                'Circle': [
                    new Style({
                        stroke: new Stroke({
                            //圆的边界样式
                            color: 'red',
                            width: 2
                        }),
                        fill: new Fill({
                            //圆的填充样式
                            color: 'rgba(255,0,0,0.2)'
                        })
                    })
                ]
            };
            let styleFunction = function (feature) {
                //根据要素类型设置几何要素的样式
                return styles[feature.getGeometry().getType()];
            };

            //加载矢量数据源
            this.vectorSource = new Vector({
                //url: 'https://openlayers.org/en/latest/examples/data/geojson/world-cities.geojson',
                url: 'http://localhost:8888/openlayer/geojson/world-cities.geojson',
                format: new GeoJSON(),
            });


            const vector = new VectorLayer({
                //矢量数据源
                source: this.vectorSource,
                //样式设置
                style: styleFunction
            });

            //初始化地图
            this.map = new Map({
                target: "map", //指定挂载dom，注意必须是id
                layers: [
                    new TileLayer({
                        source: new OSM(),
                    }), vector
                ],
                //配置视图
                view: new View({
                    center: [0, 0],
                    zoom: 0,
                }),
            });

        },
        methods: {}
    };
</script>


<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    .MapTool {
        position: absolute;
        top: .5em;
        right: .5em;
        z-index: 9999;
    }
</style>